<style lang="less" scoped>
.register_1 {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  .content {
    position: absolute;
    top: 304px;

    .user-info-bg {
      width: 600px;
      height: 96px;
      border-radius: 8px;
      background-color: rgba(241, 241, 241, 1);
      display: flex;
      align-items: center;
      padding-left: 40px;
    }
    .user-info {
      .user-info-bg;
    }

    .form-input {
      width: 462px;
      border-radius: 16px;
      background-color: rgba(241, 241, 241, 1);
      font-size: 28px;
      border: none;
      margin-bottom: 0;
      line-height: normal;
      padding: 0 0 0 52px;
    }

    .marginBottom60 {
      margin-bottom: 60px;
    }
    .user-info-pwd-message {
      .user-info-bg;
      .form-input {
        width: 362px;
      }
      .get-validate-code {
        width: 128px;
        height: 56px;
        line-height: 56px;
        border-radius: 4px;
        background-color: rgba(81, 104, 255, 1);
        color: rgba(255, 255, 255, 1);
        font-size: 30px;
        padding: 0;
        text-align: center;
        vertical-align: text-bottom !important;
        position: absolute;
        //margin-top: 10px;
        right: 40px;
      }
    }

    input::-webkit-input-placeholder {
      color: #aab2bd;
    }

    .login-btn,
    .submit-btn,
    .enter-btn {
      margin-top: 64px;
      width: 600px;
      height: 96px;
      border-radius: 16px;
      background-color: #536dfe;
      box-shadow: 0px 5px 12px 0px rgba(83, 109, 254, 0.44);
      line-height: 66px;
      color: rgba(255, 255, 255, 1);
      font-size: 36px;
    }
    .submit-btn {
      margin-top: 88px;
    }

    .enter-btn {
      margin-top: 120px;
    }

    .login-link {
      margin-top: 64px;
      height: 44px;
      line-height: 44px;
      color: rgba(83, 109, 254, 1);
      font-size: 32px;
      text-align: justify;
      display: flex;
      justify-content: center;
      width: 100%;
    }
  }
}

.jeicon {
  color: #cfcfcf;
  font-size: 30px;
}

.phone-desc {
  margin-top: 8px;
  //    margin-left: 40px;
  text-align: center;
  color: rgba(61, 60, 60, 1);
  margin-bottom: 21px;
  span {
    font-size: 26px;
  }
}

.loading-bar54 {
  margin-bottom: 54px !important;
}

.jeicon-eye {
  position: absolute;
  right: 38px;
  font-size: 24px;
}

.jeicon-eye-close {
  position: absolute;
  right: 40px;
  font-size: 30px;
}

.loading-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  margin-bottom: 106px;
  img {
    width: 50px;
    height: 50px;
  }

  .ing-bar {
    width: 100px;
    height: 3px;
    background: rgba(216, 216, 216, 1);
    border-radius: 3px;
    .color-bar {
      width: 70px;
      height: 3px;
      background: rgba(83, 109, 254, 1);
      border-radius: 3px 0px 0px 3px;
    }
  }

  .loaded-bar {
    width: 100px;
    height: 3px;
    background: rgba(216, 216, 216, 1);
    border-radius: 3px;
  }
  .ed-bar {
    width: 100px;
    height: 3px;
    background: rgba(83, 109, 254, 1);
    border-radius: 3px;
  }
}

.page-container {
  height: 100%;
  overflow: hidden;
  background: url('../../assets/register-bg.png') no-repeat top center;
  background-size: 100% 276px;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}
</style>

<template>
  <div class="page-container">
    <div
      class="register_1"
    >
      <div class="content">
        <div
          :class="[showIndex=='3'?'loading-bar54':'']"
          class="loading-bar"
        >
          <div>
            <img src="../../assets/1.png">
          </div>
          <div>
            <div
              v-show="showIndex=='1'"
              class="ing-bar"
            >
              <div class="color-bar" />
            </div>
            <div
              v-show="showIndex!='1'"
              class="ed-bar"
            />
          </div>
          <div>
            <img
              v-show="showIndex!='1'"
              src="../../assets/2.png"
            >
            <img
              v-show="showIndex=='1'"
              src="../../assets/2-disable.png"
            >
          </div>
          <div>
            <div
              v-show="showIndex=='1'"
              class="loaded-bar"
            />

            <div
              v-show="showIndex=='2'"
              class="ing-bar"
            >
              <div class="color-bar" />
            </div>
            <div
              v-show="showIndex=='3'"
              class="ed-bar"
            />
          </div>
          <div>
            <img
              v-show="showIndex=='3'"
              src="../../assets/3.png"
            >
            <img
              v-show="showIndex!='3'"
              src="../../assets/3-disable.png"
            >
          </div>
        </div>

        <div>
          <div class="user-info">
            <i class="jeicon jeicon-mobile " />
            <input
              v-model="loginInfo.phone"
              type="tel"
              placeholder="输入手机号"
              class="form-input"
              maxlength="11"
            >
          </div>
          <p class="phone-desc">
            <span>验证手机号（此手机号将作为登录时的个人账号）</span>
          </p>
          <div class="user-info-pwd-message marginBottom60">
            <i class="jeicon  jeicon-key  " />
            <input
              v-model="loginInfo.validateCode"
              type="number"
              placeholder="输入验证码"
              class="form-input"
              oninput="if(value.length>6)value=value.slice(0,6)"
              maxlength="6"
              pattern="\d*"
            >
            <button
              class="get-validate-code"
              @tap="getValidateCode"
            >
              <span v-show="sendAuthCode">获取</span>
              <span v-show="!sendAuthCode">{{ auth_time }}s</span>
            </button>
          </div>
          <div class="user-info ">
            <i class="jeicon jeicon-lock" />
            <input
              v-show="showPwd"
              v-model="loginInfo.pwd"
              type="password"
              placeholder="密码"
              class="form-input"
              maxlength="20"
            >
            <input
              v-show="!showPwd"
              v-model="loginInfo.pwd"
              type="text"
              placeholder="密码"
              class="form-input"
              maxlength="20"
            >
            <i
              v-show="!showPwd"
              class="jeicon jeicon-eye viewpwd"
              @tap="showPwd=!showPwd"
            />
            <i
              v-show="showPwd"
              class="jeicon jeicon-eye-close viewpwd"
              @tap="showPwd=!showPwd"
            />
          </div>
          <button
            class="login-btn"
            @tap="firstNext"
          >
            下一步
          </button>
          <span
            class="login-link"
            @tap="login"
          >已有账户去登录</span>
        </div>
      </div>

      <sel-companylist
        ref="selCompanList"
        :company-list="company"
        :user-info="loginInfo"
        :state="false"
        :app-login="appLoginInfo"
      >
        <div slot="modalTitle_bind">
          此手机已绑定以下企业，点击进入
        </div>
        <div
          slot="modalFotter"
          @tap="goCreate"
        >
          创建新账户
        </div>
        <div slot="modalMessage" />
      </sel-companylist>
    </div>
  </div>
</template>

<script>
import selcompanyList from '../../components/selcompanyList/index';
import { validate, toastValidate } from '../../../../helper/validate';
import { openWindow } from '@/helper';
import {
  fetchSendValidateCode,
  fetchHasUser,
  fetchCheckValidate,
  fetchSearchUserCode,
} from '../../actions/login';

export default {
  name: 'Register',
  components: {
    'sel-companylist': selcompanyList,
  },
  data() {
    return {
      showPwd: true,
      showIndex: '1',
      loginInfo: {},
      company: [],
      appLoginInfo: {},
      sendAuthCode: true, // 判断
      auth_time: 0,
      isNewAccount: false,
      params: {},
    };
  },
  created() {
    mui.init();
  },
  mounted() {
    const currentWeb = plus.webview.currentWebview();
    this.params = currentWeb;
    const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;

    window.onresize = () => {
      const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
      if (resizeHeight - 0 < originalHeight - 0) {
        plus.webview.currentWebview()
          .setStyle({
            height: originalHeight, // 强设置为原高度
          });
      }
    };
  },
  methods: {
    // 下一步
    async firstNext() {
      if (
        !toastValidate('手机号', validate.isNull(this.loginInfo.phone))
          || !toastValidate(
            '',
            validate.isPhone(this.loginInfo.phone),
            '手机号格式不正确',
          )
          || !toastValidate(
            '验证码',
            validate.isNull(this.loginInfo.validateCode),
          )
          || !toastValidate('密码', validate.isNull(this.loginInfo.pwd))
          || !toastValidate(
            '',
            validate.regPwd(this.loginInfo.pwd),
            '密码为6位以上字母+数字',
          )
      ) {
        return false;
      }

      // 校验验证码
      const validateCodeRes = await fetchCheckValidate({
        email: this.loginInfo.phone,
        type: 'PHONE',
        cz: 'ZC',
        code: this.loginInfo.validateCode,
      });
      if (validateCodeRes.success) {
        // 检测用户是否存在
        const res = await fetchHasUser({
          email: this.loginInfo.phone,
          type: 'PHONE',
        });
        if (res.success) {
          this.isNewAccount = false;
          this.checkRegister();
        } else {
          this.isNewAccount = true;
          this.goCreate();
        }
      } else {
        mui.toast(validateCodeRes.msg);
      }
    },
    // 注册
    async checkRegister() {
      const userRes = await fetchSearchUserCode({
        userCode: this.loginInfo.phone,
        // password: this.loginInfo.pwd
      });
      if (userRes.success) {
        const companyList = userRes.obj;
        this.company = companyList;
        if (companyList.length <= 0) {
          this.goCreate();
        } else {
          if (this.params.openId) {
            this.appLoginInfo = {
              code: this.params.openId,
              access_token: this.params.accessToken,
              state: this.params.state,
              phonemumber: this.loginInfo.phone,
            };
          }
          this.$refs.selCompanList.showModal();
        }
      } else {
        mui.toast(userRes.msg);
      }
    },
    // 注册
    goCreate() {
      this.$refs.selCompanList.hideModal();
      const params = {
        phone: this.loginInfo.phone,
        pwd: this.loginInfo.pwd,
        isNewAccount: this.isNewAccount,
        code: this.loginInfo.validateCode,
      };
      if (this.params.type !== 'SUANBAN') {
        params.type = this.params.type;
        params.openId = this.params.openId;
        params.accessToken = this.params.accessToken;
      }
      openWindow({
        url: './pages_register_2_index.html',
        id: '__register_2View',
        title: '免费注册',
        extras: params,
      });
      /* this.$router.push({
        name: 'register_2',
        params,
      }); */
    },
    // 获取验证码
    async getValidateCode() {
      if (
        !toastValidate('手机号', validate.isNull(this.loginInfo.phone))
          || !toastValidate(
            '',
            validate.isPhone(this.loginInfo.phone),
            '手机号格式不正确',
          )
      ) {
        return false;
      }

      if (this.sendAuthCode) {
        const res = await fetchSendValidateCode({
          email: this.loginInfo.phone,
          type: 'PHONE',
          cz: 'ZC',
        });
        mui.toast(res.msg);
        if (res.success) {
          this.sendAuthCode = false;
          this.auth_time = 59;
          const authTimetimer = setInterval(() => {
            this.auth_time -= 1;
            if (this.auth_time <= 0) {
              this.sendAuthCode = true;
              clearInterval(authTimetimer);
            }
          }, 1000);
        }
      }
    },
    login() {
      openWindow({
        id: '__loginview',
        styles: {
          titleNView: {
            backgroundColor: '#536DFE',
            titleText: '',
            autoBackButton: false,
          },
        },
      });
      // this.$router.replace({ name: 'login' });
    },
  },
};
</script>
